#{extends 'CRUD/layout.html' /}
#{set title:messages.get('crud.show.title', type.modelName) /}

<div id="crudShow" class="${type.name}">

    <h2 id="crudShowTitle">&{'crud.show.title', type.modelName}</h2>

    <div class="objectForm">
    #{form action:@save(object._key()), enctype:'multipart/form-data'}
       #{crud.form fields:['lastName', 'firstName', 'middleName', 'login', 'password', 'post', 'roles'] }
             #{crud.custom 'roles'}
             	<label for="roles">
		            &{'roles'}
		        </label>
		        <script type="text/javascript">
			        var toggle = function(roleElement) {
			            var input = document.getElementById('h'+roleElement.id);
			            if(roleElement.className.indexOf('selected') > -1) {
			                roleElement.className = 'role';
			                input.value = '';
			            } else {
			                roleElement.className = 'role selected';
			                input.value = roleElement.id;
			            }
			        }
			    </script>
			    
			    <div class="roles-list">
			        #{list items:models.Role.findAll(), as:'role'}
			               <span id="${role.roleId}" onclick="toggle(this)" 
				                class="role ${object.roles.contains(role) ? 'selected' : ''}">
				               ${role.roleName}
				           </span> 
				           <input id="h${role.roleId}" type="hidden" name="object.roles.roleId" 
				                    value="${object.roles.contains(role) ? role.roleId : ''}" /> 
			        #{/list}
			    </div>
		    #{/crud.custom}
       #{/ crud.form}
        <p class="crudButtons">
            <input type="submit" name="_save" value="&{'crud.save', type.modelName}" />
            <input type="submit" name="_saveAndContinue" value="&{'crud.saveAndContinue', type.modelName}" />
        </p>
    #{/form}
    </div>

    #{form @delete(object._key())}
        <p class="crudDelete">
            <input type="submit" value="&{'crud.delete', type.modelName}" />
        </p>
    #{/form}

</div>